<script setup>
import { ref, onMounted } from 'vue'
import { useAxios, loading } from "@/configs/KicoAxios.js";

let axios = useAxios()

let data = ref()

function getDatas() {
  axios.get('/artinfo')
    .then(res => {
      console.log("????:", res)
      data.value = res.data

      // loading.value = res.loading
    })
    .catch(err => {
      console.error(err);
    })
}


onMounted(() => {
  console.log("!!!!", loading.value);
  getDatas()
})
</script>

<template>
  <div class="gree" v-if="loading">
    <span>加载中.....</span>
  </div>
  <div class="blue" v-else>{{ data }}</div>
</template>

<style scoped>
.gree {
  width: 150px;
  height: 150px;
  background: #06f;
  /* animation: myfirst 1s linear infinite; */
  position: relative;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 250px;
  /* opacity: 1; */
  /* transition: opacity 1s ease-out; */
  /* offset-path: path("M 0 0 Q 50 20, 100 0");  */
  animation: move-along-path 2s ease-in-out infinite alternate;
  offset-rotate: 0deg; /* 确保元素不随着路径旋转 */
}

.gree span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: aliceblue;
}

@keyframes move-along-path {
  0% {
    offset-distance: 0%; /* 起始点 */
  }
  100% {
    offset-distance: 100%; /* 终点 */
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
